var ContactForm = function () {
  var template = /* html */ `
    <div class="contact-form" v-loading.fullscreen.lock="loading">
      <template v-if="companyInfo!==null">
        <el-form label-width="calc(4em + 12px)">
          <el-form-item label="公司名称">
            <span>{{companyInfo.name}}</span>
          </el-form-item>
          <el-form-item label="联系电话">
            <span>{{companyInfo.phone}}</span>
          </el-form-item>
          <el-form-item label="传真">
            <span>{{companyInfo.fax}}</span>
          </el-form-item>
          <el-form-item label="地址">
            <span>{{companyInfo.address}}</span>
          </el-form-item>
          <el-form-item label="联系人">
            <div v-for="contact in contactList" :key="'contact_'+contact.id" class="contact-item">
              <el-select filterable v-model="contact.contactId">
                <el-option v-for="companyPeople in getCompanyPeples(contact)" :key="'companyPeople_'+companyPeople.id"
                  :value="companyPeople.id" :label="companyPeople.name"></el-option>
              </el-select>
              <span class="remove-contact" title="移除" @click="removeContact(contact)">
                <i class="el-icon-delete"></i>
              </span>
            </div>
            <div>
              <span class="add-contact" @click="addContact">+ 添加联系人</span>
            </div>
          </el-form-item>
        </el-form>
        <div style="text-align:center">
          <el-button size="medium" type="primary" @click="updateContact">修改联系人</el-button>
        </div>
      </template>
    </div>
  `;

  return {
    data: function () {
      return {
        loading: false,
        companyInfo: null,
        contactList: [],
        companyPeoples: []
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setContactPeople(),
        this.setUser(),
        this.setCompanyPeoples()
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setUser: function () {
        var self = this;
        return SysUtil.getUser().then(function (user) {
          self.companyInfo = user.companyInfo;
          return user;
        });
      },

      setContactPeople: function () {
        var self = this;
        return ajaxRequest('shoppingMall/getShoppingCallContactUser').then(function (contactList) {
          contactList = _.map(contactList, function (contact) {
            return {
              id: SysUtil.getId(),
              contactId: contact.id,
              name: contact.userName
            };
          });
          self.contactList = contactList;
          return contactList;
        });
      },

      setCompanyPeoples: function () {
        var self = this;
        ajaxRequest('basicData/queryPersonnel', {
          view: 1
        }, false).then(function (res) {
          var peopleList = res.returnData;
          peopleList = _.map(peopleList, function (people) {
            return {
              id: people.personId,
              name: people.personName
            };
          });
          self.companyPeoples = peopleList;
        });
      },

      getCompanyPeples: function (contact) {
        var companyPeoples = this.companyPeoples;
        var contactList = this.contactList;
        var contactIds = _.map(contactList, 'contactId');
        companyPeoples = _.filter(companyPeoples, function (companyPeople) {
          var id = companyPeople.id;
          if (contact.contactId === id) {
            return true;
          }

          return contactIds.indexOf(id) === -1;
        });

        var index = _.findIndex(companyPeoples, {
          id: contact.contactId
        });
        if (index === -1) {
          companyPeoples.push({
            id: contact.contactId,
            name: contact.name
          });
        }

        return companyPeoples;
      },

      addContact: function () {
        var contactList = this.contactList;
        contactList.push({
          id: SysUtil.getId(),
          contactId: ''
        });
      },

      removeContact: function (contact) {
        var contactList = this.contactList;
        var index = contactList.indexOf(contact);
        contactList.splice(index, 1);
      },

      updateContact: function () {
        var contactList = this.contactList;
        var contactIds = [];
        for (var i = 0; i < contactList.length; i++) {
          var contact = contactList[i];
          var contactId = contact.contactId;
          if (contactId === '') {
            this.$alert('联系人不能为空，请选择联系人', '信息');
            return;
          }
          contactIds.push(contactId);
        }

        this.loading = true;
        var self = this;
        ajaxRequest('shoppingMall/setShoppingCallContactUser', {
          idArray: JSON.stringify(contactIds)
        }).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();